<template>
  <div class="left-top-wrap">
    <div class="filter-wrap">
      <Button size="small" class="filter-btn" type="info" @click="handleStqClick">单表查询</Button>
      <Button size="small" class="filter-btn" type="primary" @click="handleUqClick">用户查询</Button>
      <Button size="small" class="filter-btn" type="warning" @click="handleTqClick">行业查询</Button>
    </div>
    <!-- 单表查询 -->
    <Modal class="modal-p10" v-model="stqVisible" title="单表查询" width="360" @on-cancel="handleModalCancel">
      <Form ref="stqForm" :model="stqForm" label-position="top" @submit.native.prevent="handleStaQuery">
        <FormItem label="表号" prop="meterId">
          <Input v-model="stqForm.meterId" ref="meterId" placeholder="请输入表号" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleStaQuery">查询</Button>
      </div>
    </Modal>
    <!-- 用户查询 -->
    <Modal class="modal-p10" v-model="uqVisible" title="用户查询" width="360" @on-cancel="handleModalCancel">
      <Form :model="uqForm" ref="uqForm" label-position="top">
        <FormItem label="用户编号" prop="unitId">
          <Input v-model="uqForm.unitId" placeholder="请输入用户编号" />
        </FormItem>
        <FormItem label="用户名称" prop="unitName">
          <Input v-model="uqForm.unitName" placeholder="请输入用户名称" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleUqQuery">查询</Button>
      </div>
    </Modal>
    <!-- 行业查询 -->
    <Modal
      v-model="tqVisible"
      class="clear-body-padding"
      title="行业查询"
      width="96%"
      @on-cancel="handleTqModalCancel"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div
        :id="id()"
        :is="tradeQueryTpl"
        :fetchData="fetchTreeMap"
        :chartData="treeMapData"
        @q-click="handleTreeMapClick"
      ></div>
    </Modal>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { each, merge } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { eTreemapOptions } from './chartOptions'
const { mapActions, mapState } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-left-top',
  components: {
    ETreemap: () => import('@/commons/charts/ETreemap')
  },
  data() {
    return {
      stqVisible: false,
      uqVisible: false,
      tqVisible: false,
      stqForm: {
        meterId: undefined
      },
      uqForm: {
        unitId: undefined,
        unitName: undefined
      },
      tradeQueryTpl: null
    }
  },
  computed: {
    ...mapState(['treeMapList']),
    id() {
      return nanoid
    },
    treeMapData() {
      const _serList = []
      each(this.treeMapList, item => {
        const { count, meterGasClass } = item
        _serList.push({
          name: meterGasClass,
          value: count
        })
      })
      return merge({}, eTreemapOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'loadTreeMapData',
      'changeCurrentMeterId',
      'changeStopTableKeyUp',
      'changeTablePageNum',
      'changeCurrentGasCls',
      'changeUserQueryParams'
    ]),
    /**
     * desc: 单表查询按钮点击
     * param {type}
     * return {type} void
     */
    handleStqClick() {
      this.changeStopTableKeyUp(true)
      this.stqVisible = true
      this.$nextTick(() => {
        this.$refs['meterId'].focus()
      })
    },
    /**
     * desc: 用户查询按钮点击
     * param {type}
     * return {type} void
     */
    handleUqClick() {
      this.changeStopTableKeyUp(true)
      this.uqVisible = true
    },
    /**
     * desc: 行业查询用户点击
     * param {type}
     * return {type} void
     */
    handleTqClick() {
      this.changeStopTableKeyUp(true)
      this.tqVisible = true
      this.tradeQueryTpl = 'ETreemap'
    },
    /**
     * desc: 模态框关闭
     * param {type}
     * return {type} void
     */
    handleModalCancel() {
      this.changeStopTableKeyUp(false)
    },
    handleTqModalCancel() {
      this.tqVisible = false
      this.tradeQueryTpl = null
      this.changeStopTableKeyUp(false)
    },
    /**
     * desc: 单表查询
     * param {type}
     * return {type} void
     */
    handleStaQuery() {
      this.changeTablePageNum(1)
      this.stqVisible = false
      this.loadTableData(this.stqForm)
      this.changeCurrentMeterId()
      this.changeCurrentGasCls()
      this.changeUserQueryParams({
        unitId: undefined,
        unitName: undefined
      })
      this.$refs['stqForm'].resetFields()
    },
    /**
     * desc: 用户查询
     * param {type}
     * return {type} void
     */
    handleUqQuery() {
      this.changeTablePageNum(1)
      this.uqVisible = false
      this.loadTableData(this.uqForm)
      this.changeUserQueryParams(this.uqForm)
      this.changeCurrentMeterId()
      this.$refs['uqForm'].resetFields()
    },
    fetchTreeMap() {
      this.loadTreeMapData()
    },
    /**
     * desc: 行业查询
     * param {type}
     * return {type} void
     */
    handleTreeMapClick(params) {
      this.changeTablePageNum(1)
      const { data = {} } = params
      const { name } = data
      this.changeCurrentGasCls(name)
      this.changeUserQueryParams({
        unitId: undefined,
        unitName: undefined
      })
      this.loadTableData({
        meterGasClass: name
      })
      this.changeCurrentMeterId()
      this.handleTqModalCancel()
    }
  }
}
</script>
<style lang="less" scoped>
.left-top-wrap {
  .filter-btn {
    margin-right: 10px;
  }
}
</style>
